<template>
  <div style="margin-bottom: 24px; padding: 16px; background: #333; border-radius: 8px; display: flex; align-items: center;">
    <label style="color: #fff; font-size: 16px; margin-right: 8px;">选择推流窗口：</label>
    <select v-model="selected" @change="setWindow" style="padding: 4px 12px; font-size: 15px; border-radius: 4px; border: 1px solid #888; background: #222; color: #fff;">
      <option v-for="w in windows" :key="w.hwnd" :value="w.hwnd">
        {{ w.title }} ({{ w.hwnd }})
      </option>
    </select>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from 'vue';

const windows = ref([]);
const selected = ref('');
const emit = defineEmits(['window-changed']);
const props = defineProps({ backendIp: { type: String, default: 'localhost' } });

async function fetchWindows() {
  const res = await fetch(`http://${props.backendIp}:8080/api/windows/list`);
  windows.value = await res.json();
  if (windows.value.length > 0) selected.value = windows.value[0].hwnd;
}

async function setWindow() {
  if (!selected.value) return;
  await fetch(`http://${props.backendIp}:8080/api/windows/set?hwnd=${encodeURIComponent(selected.value)}`, { method: 'POST' });
  emit('window-changed');
}

onMounted(fetchWindows);
</script> 